<template>
  <div class="tab-container flex_space_around">
    <router-link class='tab-item'
                 to="/recommend">
      <span>推荐</span>
    </router-link>
    <router-link class='tab-item'
                 to="/singer">
      <span>歌手</span>
    </router-link>
    <router-link class='tab-item'
                 to="/rank">
      <span>排行</span>
    </router-link>
    <router-link class='tab-item'
                 to="/search">
      <span>搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable.styl'
.tab-container
  position relative
  height 44px
  line-height 44px
  text-align center
  color $color-text-d
  font-family 'Microsoft YaHei'
  font-size $font-size-medium
  .tab-item
    display block
    padding 0 24px
    &.router-link-active
      span
        position relative
        color $color-theme
        &:after
          position absolute
          bottom -8px
          width 100%
          height 2px
          display block
          content ''
          background $color-theme
          border-radius 4px
</style>